<template>
    <div id='' class='card_row'>
        <div class="header">
            <img :src="lineimg" alt="" srcset="">
            <span>{{title}}</span>
        </div>
        <div class="content_view" :name="title | flerName">
            <!-- 组件 -->
            <CradItem v-for="(item,index) in eachItem" :key="index" :dataInfo="item" @selectEd="changeSelect" />
        </div>
    </div>
</template>
<script>
import CradItem from './card_item.vue'

import lineimg from '@/assets/svg/fontApp/line_icon.svg'
export default {
    name: '',
    props: ['eachItem', 'title'],
    data() {
        return {
            // active: '',
            lineimg: lineimg,
        };
    },
    components: { CradItem },
    computed: {},
    beforeMount() { },
    mounted() {
        let bdcDom = document.querySelector(`.content_view[name=${this.$options.filters['flerName'](this.title)}]`)
        bdcDom.addEventListener("wheel", (event) => {
            event.preventDefault();
            bdcDom.scrollLeft += event.deltaY;
        })
    },
    methods: {
        changeSelect(event) {
            // this.active = event.title
        }
    },
    watch: {},
    filters: {
        // let list = document.querySelectorAll(".card_item")
        // for (let i = 0; i < list.length; i++) {
        //     const element = list[i];
        //     element.classList.remove('active')
        // }
        flerName(str) {
            const pattern = /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
            let newStr = str.replace(pattern, "")
            return newStr
        }
    }
}
</script>
<style lang='less' scoped>
.card_row {
    .header {
        height: 48px;
        display: flex;
        justify-content: start;
        align-items: center;
        img {
            width: 32px;
            height: 32px;
        }
        span {
            font-size: 18px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #17233d;
        }
        margin-top: 20px;
    }
    .content_view {
        position: relative;
        width: 100%;
        height: 184px;
        background: #f8f8f9;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        overflow: auto;
        display: flex;
    }
}
</style>